<template>
  <view class="my-content">

    <view class="my-top">
      <view class="my-info">
        <view class="my-info-portrait">
          <uni-icons class="portrait-icon" fontFamily="iconfont" :size="80">{{`&#xe62f;`}}</uni-icons>
          <!-- <image class="portrait-img" src="../../static/uni.png" mode="aspectFill"></image> -->
        </view>
        <view class="my-info-action">
          <view class="my-info-action-top">
            <!--            <text class="action-top-login" @click="clickLogin">请点击登录</text> -->
            <text class="action-top-name">{{nickName}}</text>
          </view>
          <view class="my-info-action-bottom">
            <uni-icons fontFamily="iconfont" :size="25" color="#3D3D3D">{{`&#xe653;`}}</uni-icons>
            <text class="action-bottom-text" @click="clickFriend">邀请好友赚钱 ></text>
          </view>

        </view>
        <!--        <view class="my-info-exit">
          <text>退出登录</text>
        </view> -->
      </view>
      <view class="my-extend">
        <view class="my-extend-left" @click.stop="clickMyGrokerage">
          <text class="extend-left-value my-extend-value-font">{{0}}</text>
          <text class="extend-left-hint">我的佣金</text>
        </view>
        <view class="my-extend-center">
          <text class="extend-center-value my-extend-value-font">{{0}}</text>
          <text class="extend-center-hint" @click.stop="clickWitchdrawal">可提现</text>
        </view>
        <view class="my-extend-right">
          <text class="extend-right-value my-extend-value-font">{{0}}</text>
          <text class="extend-right-hint" @click.stop="clickWitchdrawal">已提现</text>
        </view>
      </view>
    </view>

    <view class="my-center">
      <view class="my-center-top">
        <view class="center-top-left">
          <view class="order-icon">
            <uni-icons fontFamily="iconfont" :size="30" color="#FFDA00">{{`&#xe649;`}}</uni-icons>
          </view>
          <text>我的订单</text>
        </view>
        <text class="order-font" @click="clickAll">全部 > </text>
      </view>
      <!--      <view class="my-center-bottom">
        <view class="center-bottom-item1">
          <uni-icons fontFamily="iconfont" :size="40" color="#FFDA00">{{`&#xe6b8;`}}</uni-icons>
          <text>待付款</text>
        </view>

        <view class="center-bottom-item2">
          <uni-icons fontFamily="iconfont" :size="40" color="#FFDA00">{{`&#xe60a;`}}</uni-icons>
          <text>待发货</text>
        </view>

        <view class="center-bottom-item3">
          <uni-icons fontFamily="iconfont" :size="40" color="#FFDA00">{{`&#xe622;`}}</uni-icons>
          <text>待取出</text>
        </view>

        <view class="center-bottom-item4">
          <uni-icons fontFamily="iconfont" :size="40" color="#FFDA00">{{`&#xe6a6;`}}</uni-icons>
          <text>已完成</text>
        </view>


      </view> -->
    </view>

    <view class="my-bottom">

      <view class="my-bottom-coupon" @click.stop="clickCoupon">
        <view class="coupon-left">
          <view class="coupon-icon">
            <uni-icons fontFamily="iconfont" :size="30" color="#F54653">{{`&#xe8c8;`}}</uni-icons>
          </view>
          <text>优惠券</text>
        </view>
        <view class="coupon-right">
          <text>查看优惠券 > </text>
        </view>
      </view>


<!--      <view class="my-bottom-service">
        <view class="service-left">
          <uni-icons fontFamily="iconfont" :size="30" color="#111111">{{`&#xe658;`}}</uni-icons>
        </view>
        <view class="service-center">
          <text>客服</text>
          <text>遇到问题，前往咨询官方客服~</text>
        </view>
      </view> -->


    </view>

  </view>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { onReady, onLoad } from '@dcloudio/uni-app';
  import { queryUserInfo } from "@/common/utils/requestModel.js"
  import { UserInfo } from '@/common/models/BaseData.ts'
  import {
    showToast
  } from "@/common/utils/public.ts"
  onLoad(() => {

  })
  onReady(() => {
    let info = uni.getStorageSync(getApp().globalData.USER_INFO_TAG)
    console.log('onReady--', info)

    requestUserInfo(info.object_id)
  })

  const nickName = ref("")

  async function requestUserInfo(userId : string) {
    queryUserInfo(userId).then(result => {
      console.log("用户信息:", result)
      if (result.data.code == 'undefined') {
        return
      }
      nickName.value = result.data.nickname.substring(0, 8)
    }).catch(e => {

    })

  }

  function clickAll() {
    uni.navigateTo({
      url: '/sub_buy_flow_pages/order_list'
    });
  }
  function clickCoupon() {
    uni.navigateTo({
      url: '/sub_buy_flow_pages/coupon_list'
    });
  }
  function clickMyGrokerage() {
    showToast('暂未开放')
    // uni.navigateTo({
    //   url: '/sub_popularize_model_pages/brokerage_details'
    // });
  }
  function clickWitchdrawal() {
    showToast('暂未开放')
    // uni.navigateTo({
    //   url: '/sub_popularize_model_pages/withdraw_deposit_record'
    // });
  }

  function clickFriend() {
     showToast('暂未开放')
    // uni.navigateTo({
    //   url: '/sub_popularize_model_pages/popularize_friend'
    // });
  }

  function clickLogin() {
    uni.navigateTo({
      url: '/sub_buy_flow_pages/user_login'
    });
  }
</script>

<style lang="scss">
  .my-content {
    width: 100%;
    height: 100%;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #FFEA58 0%, rgba(236, 241, 245, 0) 45%);
  }

  .my-top {
    width: 100%;
    height: 350rpx;
    // background: blue;

    .my-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 100%;
      height: 175rpx;
      // line-height: 175rpx;

      .my-info-portrait {
        position: relative;
        display: block;
        width: 160rpx;
        height: 160rpx;

        .portrait-icon {
          position: absolute;
        }

        .portrait-img {
          position: absolute;
          width: 100%;
          height: 100%;
        }
      }

      .my-info-action {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        height: 70%;
        width: 50%;
        margin-left: 10rpx;
        // background: blue;

        .my-info-action-top {
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: center;
          width: 100%;
          height: 40%;

          .action-top-login {
            position: absolute;
            font-size: 40rpx;
            font-weight: 700;
          }

          .action-top-name {
            position: absolute;
          }
        }

        .my-info-action-bottom {
          display: flex;
          flex-direction: row;
          align-items: center;
          width: 100%;
          height: 40%;

          .action-bottom-text {
            padding-left: 10rpx;
            font-size: 25rpx;
            color: #3D3D3D;
          }

        }


      }

      .my-info-exit {
        display: inline-flex;
        align-items: center;
        width: 30%;
        height: 100%;
      }
    }

    .my-extend {
      position: relative;
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 175rpx;
      margin-top: 10rpx;
      background: white;
      border-radius: 20rpx;
      font-size: 30rpx;
      color: #696969;
      overflow: hidden;

      .my-extend-left {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 100%;
        z-index: 1;

        .extend-left-value {}

        .extend-left-hint {}
      }

      .my-extend-center {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 40%;
        height: 100%;

        .extend-center-value {}

        .extend-center-hint {}
      }

      .my-extend-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 30%;
        height: 100%;

        .extend-right-value {}

        .extend-right-hint {}
      }

      .my-extend-value-font {
        font-size: 50rpx;
        font-weight: 700;
        color: black;
      }
    }

    // .my-extend::after {
    // position: absolute;
    // // top: -50rpx;
    // font-family: "iconfont";
    // content: "\e6b5";
    // transform: translate(50rpx,-150rpx) rotate(20deg);
    // font-size: 20rem;
    // font-weight: 700;
    // color: #E3C083;
    // }
  }

  .my-center {
    display: flex;
    flex-direction: column;
    width: 100%;
    // height: 300rpx;
    margin-top: 30rpx;
    border-radius: 20rpx;
    background: #ffffff;

    .my-center-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 150rpx;
      padding: 0 20rpx;
      box-sizing: border-box;

      .center-top-left {
        display: flex;
        flex-direction: row;
        align-items: center;
        height: 100%;
        font-weight: 700;
        font-size: 35rpx;

        .order-icon {
          padding: 20rpx;
          background: #FEECED;
          margin-right: 20rpx;
          border-radius: 50rpx;
        }



      }
        .order-font {
          font-size: 25rpx;
          color: #696969;
        }
    }

    .my-center-bottom {
      display: flex;
      flex-direction: row;
      width: 100%;
      height: 60%;

      // background: #696969;
      .center-bottom-item1,
      .center-bottom-item2,
      .center-bottom-item3,
      .center-bottom-item4 {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
    }
  }

  .my-bottom {
    width: 100%;

    .my-bottom-coupon {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 150rpx;
      margin-top: 30rpx;
      padding: 0 20rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-sizing: border-box;

      .coupon-left {
        display: inline-flex;
        align-items: center;
        font-size: 35rpx;
        font-weight: 700;
        color: #111111;

        .coupon-icon {
          padding: 20rpx;
          background: #FEECED;
          margin-right: 20rpx;
          border-radius: 50rpx;
        }
      }

      .coupon-right {
        font-size: 25rpx;
        color: #696969;

      }

    }



    .my-bottom-service {
      display: inline-flex;
      align-items: center;
      width: 100%;
      height: 150rpx;
      margin-top: 30rpx;
      padding: 0 20rpx;
      background: #ffffff;
      border-radius: 20rpx;
      box-sizing: border-box;

      .service-left {
        padding: 10rpx;
        background: #FDDF03;
        border-radius: 50rpx;
      }

      .service-center {
        display: flex;
        flex-direction: column;
        margin-left: 20rpx;
        font-size: 20rpx;

        text:nth-child(1) {
          margin-bottom: 10rpx;
          font-size: 30rpx;
          font-weight: 700;
        }

      }
    }
  }
</style>